<template>
  <view class="index-page">
    <!-- 侧边栏组件 -->
    <sideBar :menuList="menuList" @menu-item-click="handleMenuItemClick" />
    <!-- 主内容区域 -->
    <view class="main-content">
      <view >章节名</view>
      <view style="margin: 20rpx;">
		  <view style="margin: 0 auto;">
			  <view style="float: left;margin: 0 20px;">
				  <text style=" float: left;">章节名:</text><input type="text" style=" float: left; border: 1px solid #eee;" placeholder="输入章节名"/>
			  </view>
			  <button class="uni-button" size="mini" type="primary" @click="search">搜索</button>
			  <button class="uni-button" size="mini" type="primary" @click="add" style="float: right;">录入</button>
		  </view>
      		
      </view>
      <uni-table border stripe emptyText="暂无更多数据">
      	<!-- 表头行 -->
      	<uni-tr>
      		<uni-th align="left">书籍名</uni-th>
      		<uni-th align="left">章节序号</uni-th>
			<uni-th align="left">章节标题</uni-th>
			
      		<uni-th align="center">操作</uni-th>
      	</uni-tr>
      	<!-- 表格数据行 -->
      	<uni-tr v-for="item in contentList">
      		<uni-td>{{item.bookName}}</uni-td>
      		<uni-td>{{item.index}}</uni-td>
			<uni-td>{{item.title}}</uni-td>
			
      		<uni-td align="center">
      			<button class="uni-button" size="mini" type="primary" @click="editItem(item.id)">编辑</button>
      			<button class="uni-button" size="mini" type="warn" @click="deleteItem(item.id)"
      				style="margin: 0 10rpx;">删除</button>
      		</uni-td>
      	</uni-tr>
      </uni-table>
      <view>
      	<uni-pagination :total="contentTotal" @change="changePage"></uni-pagination>
      </view>
      
    </view>
  </view>
  
  <uni-popup  ref="popup" type="center" border-radius="10px 10px 0 0" >
  		  <view class="popup" style="padding: 20rpx;">
  			   标题:<uni-section title="审核意见" type="line">
  			        <input v-model="chapterTitle" style="border: 1rpx solid black;padding: 5rpx;"/>
  			      </uni-section>
				  章节序号:<uni-section title="审核意见" type="line">
				       <input v-model="chapterIndex" style="border: 1rpx solid black;padding: 5rpx;" type="number"/>
				     </uni-section>
				  内容:<uni-section title="审核意见" type="line">
				       <textarea v-model="chapterContent" style="border: 1rpx solid black;padding: 5rpx;width: 800rpx;height: 800rpx;" maxlength="-1"></textarea>
				     </uni-section>
  				  <view style="width: 100%;margin-top: 30px;">
  					  <view style="width: max-content;margin: 0 auto;">
  						  <button  class="uni-button" size="mini" type="primary" @click="submitAudit">提交</button>
  					  </view>
  				  </view>
  		  </view>
  </uni-popup>
  
  
</template>

<script setup>
import {
		onShow,onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue';
	import sideBar from '../../components/side-bar.vue'
	import {
		baseUrl,
		menuList,
		handleMenuItemClick,
		checkLogin
	} from '../../static/js/common.js'

	const contentList = ref([])
	let contentTotal = ref(0)
	let bookId=''

	let pageIndex = 1;
	let pageSize = 10;
	
	let popup=ref()
	let range=ref([
	    { value: 2, text: "拒绝" },
	    { value: 3, text: "通过" }
	  ])
	let auditStatus=ref(0)
	
	let id=0
	
	let chapterContent=ref()
	let chapterTitle=ref()
	let chapterIndex=ref()
	let chaperId='';
	let contentId=''
	
	function resetPopup(){
		chapterContent.value=''
		chapterTitle.value=''
		chapterIndex.value=''
		chaperId=''
		contentId=''
	}
	function add(){
		resetPopup()
		popup.value.open()
	}
	  
	function submitAudit(){
		let authorization = checkLogin()
		let params={
			  bookId,
			  content:chapterContent.value,
			  chapterTitle:chapterTitle.value,
			  chapterIndex:chapterIndex.value,
			  chaperId,
			  id:contentId
		  }
		  uni.request({
		  	url:baseUrl+'/content/saveOrUpdate',
			data:params,
			header: {
				'Authorization': authorization
			},
			method:'POST',
			success:(res)=>{
				if(res.data.code==200){
					popup.value.close()
					fillTable()
				}
			}
		  })
	  }
	  
	  function editItem(chapterId) {
		resetPopup()
		chaperId=chaperId;
		let authorization = checkLogin()
		uni.request({
			url: baseUrl + "/content/get?chapterId="+chapterId,
			method: 'GET',
			header: {
				'Authorization': authorization
			},
			success: (res) => {
				chapterContent.value=res.data.data.content
				chapterTitle.value=res.data.data.chapterTitle
				chapterIndex.value=res.data.data.chapterIndex
				contentId=res.data.data.id
			}
		})
	  	popup.value.open()
	  }

	function deleteItem(id) {
		let authorization = checkLogin()
		uni.showModal({
			title: '提示',
			content: '确定删除这个章节吗',
			success: function(res) {
				if (res.confirm) {
					uni.request({
						url: baseUrl + '/chapter/delete?id=' + id,
						header: {
							'Authorization': authorization
						},
						success: (res) => {
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '删除成功'
								})
								fillTable()
							}
						}
					})
				} else if (res.cancel) {

				}
			}
		});

	}


	function changePage(e) {
		pageIndex = e.current
		fillTable()
	}

	onShow(() => {
		fillTable()
	})
	
	onLoad(options=>{
		bookId=options.id
	})

	function fillTable() {
		let authorization = checkLogin()
		let params = {
			pageIndex,
			pageSize,
			bookId,
		}
		uni.request({
			url: baseUrl + "/chapter/list",
			data: params,
			method: 'POST',
			header: {
				'Authorization': authorization
			},
			success: (res) => {
				console.log(res.data.data.result)
				contentList.value = res.data.data.result
				contentTotal.value = res.data.data.itemCount
			}
		})
	}

</script>

<style scoped>
.index-page {
  display: flex;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.popup{
	
	background-color: white;
	padding: 20rpx;
}
</style>